<template>
  <div class="page-my-info flex-col">
    <van-nav-bar
      title="个人信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      class="flex-shrink"
    />
    <div class="box_1 flex-col">
      <div class="image-text_3 flex-col">
        <img
          class="image_2"
          referrerpolicy="no-referrer"
          src="./assets/img/SketchPngf88ba9aff43f5bc85c7a7adbcb51adbbe1877075f438b8a440806df3b25e0d8e.png"
        />
        <span class="text-group_1">微信用户</span>
      </div>
      <div class="text-wrapper_2 flex-row justify-between">
        <span class="text_4 flex-shrink">姓名</span>
        <input
          class="text_5 ipt flex-grow"
          type="text"
          placeholder="请输入姓名"
        />
      </div>

      <div class="list_2 flex-col">
        <div class="list-items_1 flex-row justify-between">
          <span class="text_6 flex-shrink">性别</span>
          <div class="text-group_2 align-center">
            <span class="mr-2">女</span>
            <img :src="arrow" alt="" />
          </div>
        </div>
        <div class="list-items_1 flex-row justify-between">
          <span class="text_6 flex-shrink">生日</span>
          <div class="text-group_2 align-center">
            <span class="mr-2">1992-09-23</span>
            <img :src="arrow" alt="" />
          </div>
        </div>
        <div class="list-items_1 flex-row justify-between">
          <span class="text_6 flex-shrink">手机</span>
          <div class="text-group_2 align-center">
            <input
              class="text_5 ipt flex-grow"
              type="text"
              placeholder="请输入手机号"
            />
          </div>
        </div>
        <div class="list-items_1 flex-row justify-between">
          <span class="text_6 flex-shrink">工作单位/学校</span>
          <div class="text-group_2 align-center">
            <input
              class="text_5 ipt flex-grow"
              type="text"
              placeholder="请输入工作单位/学校"
            />
          </div>
        </div>
      </div>
      <van-button class="mt-4" type="info" color="linear-gradient(to right, #E4DCBF, #D7BD75)">保存</van-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arrow:
        "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9affe6a9d023a9aa2f7ac291b2a2c4bd6822e736d22f5c2d99ab27dc92603609",
      loopData0: [
        {
          lanhutext0: "性别",
          specialSlot2: {
            lanhutext0: "女",
            lanhuimage0:
              "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9affe6a9d023a9aa2f7ac291b2a2c4bd6822e736d22f5c2d99ab27dc92603609",
          },
          slot2: 2,
        },
        {
          lanhutext0: "生日",
          specialSlot2: {
            lanhutext0: "请选择",
            lanhuimage0:
              "https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e0b334a463494ab3bf480fa28083995b_mergeImage.png",
          },
          slot2: 2,
        },
        { lanhutext0: "手机", slot1: 1 },
      ],
      constants: {},
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>
<style scoped lang="less" src="./assets/index.response.less" />

<style lang="less" scoped>
.box_1 {
  min-height: 100vh;
}
.ipt {
  background-color: transparent;
  outline: none;
  border: none;
  text-align: right;
  padding-left: 20px;
}
.text-group_2 {
  color: rgba(255, 255, 255, 1);
  font-size: 4vw;
  text-align: left;
}
</style>
